import React, {useRef, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import { Image, Popconfirm, message} from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable, {ActionType} from '@ant-design/pro-table';
import {delGoodsComments, getGoodsComment, replyGoodsComments} from "@/services/ant-design-pro/goods";
import AddReplyContent from "./components/AddReplyContent";


const GoodsComment = () => {
  const actionRef = useRef<ActionType>();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [addReplyContentId,setAddReplyContentId] = useState(null);

  const columns: ProColumns = [
    {
      title: '时间选择',
      dataIndex: 'time',
      valueType: 'radioButton',
      initialValue: '',
      hideInTable: true,
      colSize: '1.5',
      valueEnum: {
        '': '全部',
        today: '今天',
        yesterday: '昨天',
        week: '最近7天',
        thirty: '最近30天',
        month: '本月',
        year: '本年'
      }
    },
    {
      dataIndex: 'start_time',
      valueType: 'dateTimeRange',
      hideInTable: true,
      initialValue: '',
      search: {
        transform: (value: any) => ({ start_time: value[0], end_time: value[1] })
      }
    },
    {
      title: '评论ID',
      width: 120,
      dataIndex: 'id',
      search: false
    },
    {
      title: '评价状态',
      width: 120,
      dataIndex: 'is_reply',
      hideInTable:true,
      search: true,
      hideInSearch:false,
      valueType: 'select',
      valueEnum: {
        '1': { text: '已回复', status: 'Default' },
        '0': { text: '待回复', status: 'Processing' },
      },
    },
    {
      title: '商品信息',
      width: 120,
      align: 'left',
      dataIndex: 'product_name',
      search: true,
      render:(_, record)=>{
        return (
          <div style={{display: 'flex'}}>
            <Image
              width={40}
              src={record.product?.image_url}
            />
            <div style={{marginLeft:'10px'}}>
              {record.product?.product_name}
            </div>
          </div>

        );
      }
    },
    {
      title: '评分',
      width: 80,
      dataIndex: 'product_score',
      align: 'center',
      search: false,
      sorter: (a, b) => a.containers - b.containers,
    },


    {
      title: '用户名称',
      width: 80,
      align: 'right',
      dataIndex: 'nickname',
      search: true,
    },

    {
      title: '评价内容',
      dataIndex: 'comment',
      ellipsis: true,
      search: false,
      align: 'center',
      render:(_, record)=>{
        return (
          <div>
            <Image
              width={40}
              src={record.pics_url}
            />
            <div style={{marginLeft:'10px'}}>
              {record.comment}
            </div>
          </div>

        );
      }
    },
    {
      title: '回复内容',
      dataIndex: 'merchant_reply_content',
      ellipsis: true,
      search: false,
      align: 'center',
    },
    {
      title: '评价时间',
      dataIndex: 'created_at',
      valueType: 'date',
      hideInSearch:true,
      align: 'center',
      sorter: (a, b) => a.containers - b.containers,
    },
    {
      title: '操作',
      width: 150,
      key: 'option',
      valueType: 'option',
      align: 'center',
      fixed: 'right',
      render: (_, record) => {
        return (
          <div>
            {
              record.is_reply === 0 ?
                <a
                  style={{ marginRight:'10px'}}
                  key="editable"
                  onClick={async() => {
                    setIsModalVisible(true)
                    setAddReplyContentId(record.id)
                    console.log(record.id);
                  }
                  }
                >
                  回复
                </a> : null
            }
            <Popconfirm
              title="确定要删除规格吗？"
              onConfirm={()=>{
                delGoodsComments(record.id).then(()=>{
                  message.success('删除成功');
                  actionRef.current.reload();
                })
              }
              }
              onCancel={()=>{
                message.success('已取消');
              }}
              okText="确定"
              cancelText="取消"
            >
              <a href="#">删除</a>
            </Popconfirm>
          </div>
        )
      }
    }
  ];

  return (
    <PageContainer
      header={{
        title: '商品评论',
        breadcrumb: {},
      }}
    >
      <ProTable
        columns={columns}
        scroll={{ x: 1300 }}
        actionRef={actionRef}
        request={async (params) => {
          const {data} = await getGoodsComment({...params})
          console.log(data)
          return {
            data
          }
          actionRef.current.reload()
        }}
        options={false}
        search={{
          defaultCollapsed: false,
          collapseRender: false,
        }}
        editable={{
          type: 'multiple',
        }}
        rowKey="id"
        headerTitle=""
      />
      {isModalVisible ?
        <AddReplyContent
          isModalVisible={isModalVisible}
          handleCancel={() => {
            setIsModalVisible(false)
          }}
          id={addReplyContentId}
          mack={() => {
            actionRef.current?.reload();
          }}
        />
        : null
      }

</PageContainer>

  );
};

export default GoodsComment;
